<template>
  <template v-for="row in props.columns">
    <template v-if="!row.hide">
      <a-table-column
        v-if="row.children && row.children.length > 0"
        :title="row.title"
        :width="row.width"
        :filterable="row.filterable"
        :cell-class="row.cellClass"
        :header-cell-class="row.headerCellClass"
        :body-cell-class="row.bodyCellClass"
        :summary-cell-class="row.summaryCellClass"
        :cell-style="row.cellStyle"
        :header-cell-style="row.headerCellStyle"
        :body-cell-style="row.bodyCellStyle"
        :summary-cell-style="row.summaryCellStyle"
        :ellipsis="row.ellipsis ?? false"
        :tooltip="row.tooltip ?? false"
        :align="row.align || 'left'"
        :fixed="row.fixed"
      >
        <table-column
          :columns="row.children"
          @refresh="() => refresh()"
        >
          <template
            v-for="(childRow, childIndex) in row.children"
            :key="childIndex"
            #[childRow.dataIndex]="{ record, column, rowIndex }"
          >
            <template v-if="childRow.slotName">
              <slot :name="`${childRow.slotName}`" v-bind="{ record, column, rowIndex }" />
            </template>
            <template v-else>
              <slot :name="`${childRow.dataIndex}`" v-bind="{ record, column, rowIndex }" />
            </template>
          </template>
        </table-column>
      </a-table-column>
      <a-table-column
        v-else
        :title="row.title"
        :data-index="row.dataIndex"
        :width="row.width"
        :filterable="row.filterable"
        :cell-class="row.cellClass"
        :header-cell-class="row.headerCellClass"
        :body-cell-class="row.bodyCellClass"
        :summary-cell-class="row.summaryCellClass"
        :cell-style="row.cellStyle"
        :header-cell-style="row.headerCellStyle"
        :body-cell-style="row.bodyCellStyle"
        :summary-cell-style="row.summaryCellStyle"
        :ellipsis="row.ellipsis ?? false"
        :tooltip="(row.tooltip ?? false)"
        :align="row.align || 'left'"
        :fixed="row.fixed"
        :sortable="row.sortable"
      >
        <template #title>
          <slot :name="row.titleSlotName" v-bind="{ column: row }">
            {{ row.title }}
          </slot>
        </template>
        <template #cell="{ record, column, rowIndex }">
          <template v-if="row.slotName">
            <slot :name="row.slotName" v-bind="{ record, column, rowIndex }">
              {{ record[row.dataIndex] }}
            </slot>
          </template>
          <template v-else>
            <slot :name="row.title" v-bind="{ record, column, rowIndex }">
              {{ record[row.dataIndex] }}
            </slot>
          </template>
        </template>
      </a-table-column>
    </template>
  </template>
</template>

<script setup>
  import { ref } from 'vue';

  const props = defineProps({
    columns: {
      type: Array,
      default() {
        return [];
      },
    },
  });
</script>

<style scoped lang="less">

</style>
